<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jCarousel实例</title>
<link href="../style.css" rel="stylesheet" type="text/css" />

<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.2.3.pack.js"></script>

<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.pack.js"></script>

<!--
  jCarousel core stylesheet
-->
<link rel="stylesheet" type="text/css" href="../lib/jquery.jcarousel.css" />

<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/ie7/skin.css" />

<style type="text/css">
#mycarousel .jcarousel-item-placeholder {
    background: transparent url(../images/loading-small.gif) 50% 50% no-repeat;
}
</style>

<script type="text/javascript">
	function mycarousel_itemLoadCallback(carousel, state){
		if (carousel.prevFirst != null) {
			// Remove the last visible items to keep the list small
			for (var i = carousel.prevFirst; i <= carousel.prevLast; i++) {
				// jCarousel takes care not to remove visible items
				carousel.remove(i);
			}
		}
	
		var per_page = carousel.last - carousel.first + 1;
		var currPage = 0;
		var f,l;
		var cr = carousel;
	
		for (var i = carousel.first; i <= carousel.last; i++) {
			var page = Math.ceil(i / per_page);
	
			if (currPage != page) {
				currPage = page;
	
				f = ((page - 1) * per_page) + 1;
				l = f + per_page - 1;
	
				f = f < carousel.first ? carousel.first : f;
				l = l > carousel.last ? carousel.last : l;
	
				if (carousel.has(f, l)) {
					continue;
				}
	
				mycarousel_makeRequest(carousel, f, l, per_page, page);
			}
		}
	};
	
	function mycarousel_makeRequest(carousel, first, last, per_page, page){
		// Lock carousel until request has been made
		carousel.lock();
	
		jQuery.get(
			'dynamic_flickr_api.php',
			{
				'per_page': per_page,
				'page': page
			},
			function(data) {
				mycarousel_itemAddCallback(carousel, first, last, data, page);
			},
			'xml'
		);
	};
	
	function mycarousel_itemAddCallback(carousel, first, last, data, page){
		// Unlock
		carousel.unlock();
	
		// Set size
		carousel.size($('photos', data).attr('total'));
	
		var photos = $('photo', data);
		var per_page = carousel.last - carousel.first + 1;
	
		for (var i = first; i <= last; i++) {
			var pos = i - 1;
			var idx = Math.round(((pos / per_page) - Math.floor(pos / per_page)) * per_page);
	
			carousel.add(i, mycarousel_getItemHTML(photos.get(idx)));
		}
	};
	
	/**
	 * Global item html creation helper.
	 */
	function mycarousel_getItemHTML(photo){
		var url = 'http://farm'+$(photo).attr('farm')+'.static.flickr.com/'+$(photo).attr('server')+'/'+$(photo).attr('id')+'_'+$(photo).attr('secret')+'_s.jpg';
		return '<a href="http://www.flickr.com/photos/'+$(photo).attr('owner')+'/'+$(photo).attr('id')+'/" target="_blank" title="'+$(photo).attr('title')+'"><img src="' + url + '" border="0" width="75" height="75" alt="'+$(photo).attr('title')+'" /></a>';
	};
	
	jQuery(document).ready(function() {
		jQuery('#mycarousel').jcarousel({
			itemLoadCallback: mycarousel_itemLoadCallback
		});
	});


</script>
</head>

<body>
<div id="wrap">
  <h1>jCarousel</h1>
  <h2>jQuery下的滚动切换传送插件</h2>
  
  <h3>通过Ajax从Flickr API中加载滚动切换的动态内容</h3>
  <p>数据从<a href="http://flickr.com/services/api/">Flickr API</a>，方法为<a href="http://flickr.com/services/api/flickr.photos.getRecent.html">flickr.photos.getRecent</a>。所以可见区域外面的项目都被移除以保证列表长度不会太长。</p>
  <p>注意：Flickr总是有新图片不断上传的，所以您不同时间段看到的图片可那会有所不同。</p>

  <div id="mycarousel" class="jcarousel-skin-ie7">
    <ul>
      <!-- 内容会被动态加载到这里 -->
    </ul>
  </div>
	<p>
    	如果您现在在本地看到此页面，或是在您自己的服务器上浏览此页面，而图片没有显示的话，请在<code>dynamic_flickr_api.php</code>页面上添加属于您的API key。
    </p>
</div>
</body>
</html>